<template>
  <ga-card
    :title="title"
    style="height: 100%"
    :body-style="{ height: 'calc(100% - 46px)', padding: 0 }"
  >
    <template #extra>
      <ga-dropdown position="bottom">
        <icon-more-vertical style="cursor: pointer" />
        <template #content>
          <ga-doption
            @click="handleSelect(item.value, id)"
            v-for="item in operateList"
            :key="item.value"
            :value="item.edit"
            >{{ item.text }}</ga-doption
          >
        </template>
      </ga-dropdown>
    </template>
    <echartInfo :chartOption="chartOption" :id="id"/>
  </ga-card>
  <zoom ref="zoomRef">
    <echartInfo :chartOption="chartOption" :id="`${id}Index`" width='960px' height='400px'/>
  </zoom>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echartInfo from "./echartInfo.vue";
import zoom from "./zoom.vue";

const props = defineProps({
  // 标题
  title: {
    required: true,
    default: "标题",
  },
  // 图表id
  id: {
    require: true,
    default: "vmCpuChartId",
  },
  // 图表chartOption
  chartOption: {
    require: true,
    default: {},
  },
});
const operateList = [
  { value: "edit", text: "编辑" },
  { value: "delete", text: "删除" },
  { value: "find", text: "查看" },
];
const emits = defineEmits(["handleSelect"]);
const zoomRef = ref();
const handleSelect = (val, id) => {
  if(val === "find") zoomRef.value.open();
  else emits('handleSelect', val, id)
};
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
